<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/core.css">
    <link rel="stylesheet" href="css/carousel.css">
    <title>RODRIGO - 品牌理念</title>
</head>
<body style="background-color: white">
<nav class="navbar">
    <div class="container clear-fix b">
        <div class="float-left">
            <a class="navbar-brand" href="#">
                <img src="img/LOGO.png" width="200" alt="img-responsive">
            </a>
        </div>

        <div class="float-right b " style="padding:10px 20px 0 0; display:flex; ">
            <ul class="clear-fix nav_ul">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="show.html">时尚大片</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about_us.html">品牌理念</a>
                </li>
            </ul>
        </div>

    </div>
</nav>


<div class="banner">
    <img class="change pre" src="img/pre.png">
    <img class="change next" src="img/next.png">

    <div class="cirbox">
        <div class="cir"></div>
        <div class="cir"></div>
        <div class="cir"></div>
        <div class="cir cr"></div>
    </div>
    <div class="imgbox">
        <img class="img im" src="img/carousel_1.jpg" style="display: none;">
        <img class="img" src="img/carousel_2.jpg" style="display: none;">
        <img class="img" src="img/carousel_3.jpg" style="display: none;">
        <img class="img" src="img/carousel_4.jpg" style="display: inline;">
    </div>
</div>


<footer style="background-color: #0f0f0f">
    <div class="container">
        <div class="row" style="color: white">
            <div class="col-3 text-left">
                <h5>关注我们</h5>
                <h6>微信</h6>
                <h6>微博</h6>
            </div>
            <div class="col-3 text-left">

                <h5>联系我们</h5>
                <h6>400100 0088</h6>

            </div>
            <div class="col-3 text-left">
                ada
            </div>
            <div class="col-3 text-left">
                <h6 class="">法律说明</h6>
                <h6>沪ICP备15005040号-1</h6>
            </div>

            <!--爱的-->
        </div>
    </div>
</footer>

<script src="js/jq.js"></script>
<script>
    $(document).ready(function(){
        var t;
        var index=-1;
        var times=3000;//间隔时间
        t=setInterval(play,times);

        function play(){
            index++;
            if(index>3){index=0}
            $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000);
            $('.cir').eq(index).addClass('cr').siblings().removeClass('cr');
        }

        $('.cir').click(function(){
            $(this).addClass('cr').siblings().removeClass('cr');
            var index=$(this).index();
            $('.img').eq(index).fadeIn(600).siblings().fadeOut(600);
        });

        $('.pre').click(function(){
            index--;
            if(index<0){index=3}
            $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000);
            $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')
        });
        $('.next').click(function(){
            index++;
            if(index>3){index=0}
            $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000);
            $('.cir').eq(index).addClass('cr').siblings().removeClass('cr');
        });

        $('.banner').hover(
            function(){
                clearInterval(t);
            },
            function(){
                t=setInterval(play,times);
                function play(){
                    index++;
                    if(index>3){index=0}
                    $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000);
                    $('.cir').eq(index).addClass('cr').siblings().removeClass('cr');
                }
            }
        );

    });
    var winW = document.body.clientWidth;
    console.log(winW);


</script>


</body>
</html>